<template>
    <div>
        <el-input placeholder="关键字: 课题任务编号/任务名称" v-model="text" clearable
                maxlength="50"
                disable-validate-state
                @input="handleChange"
                @keyup.enter.native="handleSearch">
            <i class="el-icon-search el-input__icon" style="cursor: pointer;" slot="suffix"
            @click="handleSearch"></i>
            <!-- 高级搜索功能 -->
            <el-button slot="append" @click="advQerOpen=!advQerOpen" v-if="advancedQuery">高级查询</el-button>
            <!-- 普通搜索功能 -->
            <el-button slot="append" @click="handleSearch" v-else>搜索</el-button>
        </el-input>
        <el-drawer
            append-to-body
            direction="rtl"
            :visible="advQerOpen"
            :before-close="handleClose"
            size="410px"
            custom-class="search-drawer-rw"
            ref="drawer"
            wrapperClosable
        >
            <template slot="title">
                <div class="title">高级查询</div>
            </template>
            <div class="drawer-body">
                <el-form :model="formModel" label-width="100px">
                    <el-form-item label="编号">
                        <el-input v-model="formModel.wbsCode"></el-input>
                    </el-form-item>
                    <el-form-item label="任务名称">
                        <el-input v-model="formModel.rwName"></el-input>
                    </el-form-item>
                    <el-form-item label="委托单编号">
                        <el-input v-model="formModel.code"></el-input>
                    </el-form-item>
                </el-form>
                <div class="footer">
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch" >搜索</el-button>
                    <el-button plain icon="el-icon-refresh" @click="resetQueryParams">重置</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
export default {
    name: "AdvancedSearch",
    model: {
        prop: "value",
        event: "change"
    },
    props: {
        advancedQuery: {
            type: Boolean,
            default: false,
        },
        search: {
            type: Boolean,
            default: () => {}
        }
    },
    data() {
        return {
            text: this.value,
            advQerOpen: false, // 高级查询是否打开
            formModel: {
                wbsCode: '',
                rwName: '',
                code: ''
            }
        }
    },
    methods: {
        handleChange(val) {
            this.text = val;
            this.$emit("change", val);
        },
        handleSearch() {
            if (this.advancedQuery) {
                this.$emit('search', this.formModel)
            } else {
                this.$emit('search', this.text)
            }
        },
        resetQueryParams() {
            Object.keys(this.formModel).forEach((key) => {
                this.formModel[key] = '';
            })
        },
        handleClose() {
            this.advQerOpen = false;
        }
    }
}
</script>
<style scoped>
    .drawer-body {
        padding: 40px 20px 30px 20px;
        width: 400px;
    }
    .footer {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }
    .title {
        color: #53a8ff
    }
</style>
<style lang="less">
    .search-drawer-rw {
        .el-drawer__header {
            border-bottom: 1px solid #dee1eb !important;
            padding: 20px 0 10px 0 !important;
            margin: 0 20px !important;
        }
    }
</style>